<script setup>
import { ref, watch, onUnmounted } from "vue";
import { getAnncmtDetails, postAnncmtAdd, putAnncmtEdit } from "@/api/anncmt";
import { formatTime } from "@/utils/format";
import E from "wangeditor"; // 引入 wangEditor

// 提示父组件该刷新了
const emit = defineEmits(["success"]);

const visibleDrawer = ref(false);
const formRef = ref(null);
const editorRef = ref(null); // 编辑器容器引用
let editor = null; // 编辑器实例

// 记录公告信息
const anncmt = ref({
  title: "",
  content: "",
  publishTime: "",
  isTop: null, // 初始为 null，触发选择校验
});

// 监听抽屉显示状态，控制编辑器生命周期
watch(
  () => visibleDrawer.value,
  (newVal) => {
    if (newVal) {
      // 抽屉打开时初始化编辑器
      setTimeout(initEditor, 100); // 延迟确保容器已渲染
    } else {
      // 抽屉关闭时销毁编辑器
      destroyEditor();
    }
  }
);

// 初始化编辑器
const initEditor = () => {
  // 确保容器已挂载且编辑器未初始化
  if (!editorRef.value || editor) return;

  // 创建编辑器实例
  editor = new E(editorRef.value);

  // 配置菜单（按需调整）
  editor.config.menus = [
    "head", // 标题
    "bold",
    "italic",
    "underline", // 基础格式
    "strikeThrough",
    "foreColor",
    "backColor", // 文本样式
    "link",
    "image",
    "table", // 插入内容
    "list",
    "justify",
    "quote", // 排版
    "undo",
    "redo", // 操作
  ];

  // 内容变化时同步到数据
  editor.config.onchange = (html) => {
    anncmt.value.content = html;
    // 触发表单验证（解决富文本无 blur 事件的问题）
    formRef.value?.validateField("content");
  };

  // 图片上传配置（示例，需替换为实际接口）
  editor.config.uploadImgServer = "/api/upload/image"; // 上传接口
  editor.config.uploadImgMaxSize = 5 * 1024 * 1024; // 5MB
  editor.config.uploadImgParams = {
    type: "announcement", // 额外参数
  };

  // 创建编辑器
  editor.create();

  // 如果有初始内容（编辑时），设置到编辑器
  if (anncmt.value.content) {
    editor.txt.html(anncmt.value.content);
  }
};

// 销毁编辑器
const destroyEditor = () => {
  if (editor) {
    editor.destroy();
    editor = null; // 重置实例
  }
};

// 组件卸载时确保销毁编辑器
onUnmounted(() => {
  destroyEditor();
});

// 获取公告信息
const handleOpen = async (data) => {
  visibleDrawer.value = true;
  if (data.id) {
    // 编辑：获取详情并填充
    const res = await getAnncmtDetails(data.id);
    anncmt.value = res.data.data;
    // 延迟设置富文本内容（确保编辑器已初始化）
    setTimeout(() => {
      if (editor && anncmt.value.content) {
        editor.txt.html(anncmt.value.content);
      }
    }, 200);
  } else {
    // 新增：重置表单
    anncmt.value = {
      title: "",
      content: "",
      publishTime: "",
      isTop: null,
    };
    // 清空编辑器
    setTimeout(() => {
      editor?.txt.clear();
    }, 200);
  }
};

// 暴露方法给父组件
defineExpose({ handleOpen });

// 表单验证规则
const rules = {
  title: [
    { required: true, message: "请输入公告标题", trigger: "blur" },
    { max: 100, message: "标题不能超过100个字符", trigger: "blur" },
  ],
  content: [
    { required: true, message: "请输入公告内容", trigger: "change" }, // 适配富文本的 change 触发
  ],
  isTop: [{ required: true, message: "请选择是否置顶", trigger: "change" }],
};

// 提交表单
const onSubmit = async () => {
  // 先同步富文本内容到数据（避免遗漏最后一次编辑）
  if (editor) {
    anncmt.value.content = editor.txt.html();
  }

  // 表单验证
  formRef.value.validate();

  if (anncmt.value.id) {
    // 编辑逻辑
    //console.log("更新公告：", anncmt.value);
    // 实际项目中调用更新接口...
    const res = await putAnncmtEdit(anncmt.value);
  } else {
    // 新增逻辑
    //console.log("新增公告：", anncmt.value);
    // 获取当前时间
    anncmt.value.createTime = Date.now();
    // 实际项目中调用新增接口...
    const res = await postAnncmtAdd(anncmt.value);
  }
  // 提示添加成功
  ElMessage({
    message: `${anncmt.value.id ? "编辑" : "添加"}成功`,
    type: "success",
    plain: true,
  });

  visibleDrawer.value = false; // 关闭抽屉
  emit("success");
};

// 取消操作
const onCancel = () => {
  visibleDrawer.value = false;
};
</script>

<template>
  <!-- 抽屉 -->
  <el-drawer
    v-model="visibleDrawer"
    :title="anncmt.id ? '编辑公告' : '添加公告'"
    direction="rtl"
    size="50%"
    @close="onCancel"
  >
    <el-form
      ref="formRef"
      :model="anncmt"
      :rules="rules"
      label-width="80px"
      style="padding: 0 10px"
    >
      <el-form-item label="标题" prop="title">
        <el-input v-model="anncmt.title" placeholder="请输入标题"></el-input>
      </el-form-item>

      <el-form-item label="是否置顶" prop="isTop">
        <el-select v-model="anncmt.isTop" style="width: 100%">
          <el-option label="置顶" :value="true" />
          <el-option label="不置顶" :value="false" />
        </el-select>
      </el-form-item>

      <!-- 富文本编辑器（替换原文本域） -->
      <el-form-item label="内容" prop="content" style="margin-bottom: 20px">
        <div class="editor-container" ref="editorRef"></div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="onCancel" style="margin-left: 10px">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<style scoped>
/* 编辑器容器样式 */
.editor-container {
  width: 100%;
  min-height: 300px; /* 确保编辑器有足够高度 */
  box-sizing: border-box;
}

/* 适配 Element UI 样式的编辑器美化 */
:deep(.w-e-toolbar) {
  border-bottom: 1px solid #dcdfe6;
  background-color: #fafafa;
  padding: 8px 12px;
}

:deep(.w-e-text-container) {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
}

:deep(.w-e-text) {
  padding: 12px;
  min-height: 240px; /* 内容区最小高度 */
}
</style>
